日式網站一頁式網站

2024 iThome 鐵人賽

DAY 11

自我挑戰組

asp.net可以變出那些功能系列第 11 篇

16th鐵人賽

Tzu

2024-09-18 05:54:02

110 瀏覽

分享至

其實我覺得工程師要靠配色去創造不同的風格，還有美學真的是有難度
而且像是日式網站一頁式網站風格的內容範例，
要工程師去想真的是要有想像力啊~

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡都只有Controllers裡面的Entities>產生畫面View

或許後面不夠寫會再回頭創造出資料表的連結也是有可能的，可以期待~

日式網站一頁式網站

https://laihao2.com/Home/Contact5

只有Controllers裡面的Entities>產生畫面View

Controllers裡面的Entities

public ActionResult Contact5()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是 ASP.NET MVC 控制器中的一個 Action 方法，名為 Contact5，用於處理用戶訪問某個頁面的請求。具體解釋如下：

1. `public ActionResult Contact5()`

這是一個 Action 方法，名為 Contact5，修飾符 public 表示它可以被外部訪問。它屬於控制器類，用於響應與 "Contact5" 頁面相關的請求。

2. `ViewBag.Message = "Your contact page.";`

ViewBag 是一個動態對象，允許你在控制器與視圖之間傳遞數據。這里將字符串 "Your contact page." 賦值給 ViewBag.Message。
在視圖中，通常通過 @ViewBag.Message 來顯示這個信息。這個文本可能會在對應的視圖頁面上顯示，通常用於提示用戶當前訪問的是哪個頁面，或者提供一些簡要信息。

3. `return View();`

View() 方法表示返回一個視圖。ASP.NET MVC 框架會根據方法名 Contact5 自動查找並渲染與之對應的視圖文件（通常位於 Views/控制器名/Contact5.cshtml）。
返回的視圖可以包含 HTML 和 Razor 代碼，用於生成用戶可以看到的網頁。

總結

這個 Contact5 方法的主要作用是處理用戶請求 "Contact5" 頁面，設置一個簡單的消息 ViewBag.Message，並將其傳遞給視圖進行渲染。在視圖中，用戶可以看到這段消息，可能作為頁面的一部分顯示給用戶。
產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

@{ ViewBag.Title = "Contact5"; }

<div class="farm-wrapper">

    <h3>作品-兩欄式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }

            <title>BLOG</title>
            <style>
                img {
                    border-radius: 50%;
                }

                body {
                    background-color: pink;
                }

                dl {
                    margin-left: 20px;
                }

                dd {
                    margin-left: 20px;
                }
            </style>
        </head>
        <body>
            <header>
                <h1><img src="~/templates/carrots.png" alt="FARM CAPYZOU" style="width:200px; height:auto;" /></h1>
                <nav>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">BLOG</a></li>
                        <li><a href="#">VIDEO</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
            </header>
            <div>
                <main>
                    <article>
                        <h2>和服的四大注意事項</h2>
                        <p class="postdate">
                            <time datetime="2021-08-08T12:03">
                                着物／きもの
                            </time>
                        </p>
                        <p class="eyecatch">
            <img src="~/templates/eyecatch.png" alt="帶子">
        </p>
        <section>
            <h3>穿著順序</h3>
            <p>
                穿和服有嚴格的順序，<br>
                從內衣、襦袢（長襦袢）到外衣，再到帶子和配件，<br>
                需要按照正確的順序穿戴。<br>
            </p>
            <figure>
                <img src="~/templates/carrots.png" alt="配件">
                <figcaption>配件</figcaption>
            </figure>
                        </section>
                        <section>
                            <h3>左右襟的順序</h3>
                            <p>穿和服時一定要注意左襟壓右襟，這是生者穿和服的正確方式。右襟壓左襟是給死者穿的，<br>因此在日常生活中千萬不要搞錯。</p>
                        </section>
                        <section>
                            <h3>穿著姿勢</h3>
                            <p>穿和服時要保持優雅的姿勢，尤其是在坐下或站起來的時候。要避免大幅度的動作，<br>因為和服比較束縛，動作幅度過大會影響和服的整齊。</p>
                        </section>
                        <section>
                            <h3>腰帶（帶子）的繫法</h3>
                            <p>和服的腰帶有多種繫法，常見的有太鼓結和文庫結等。不同的場合需要不同的繫法，需根據具體情況選擇。</p>
                        </section>
                    </article>
                </main>
                <aside>
                    <nav class="categoryNav">
                        <h2>Category</h2>
                        <ul>
                            <li><a href="#">日文的學習生活(0)</a></li>
                            <li><a href="#">和服的必備知識(6)</a></li>
                            
                        </ul>
                    </nav>
                    <nav class="recentNav">
                        <h2>Recent Articles</h2>
                        <ul>
                            <li><a href="#">和服的四大注意事項</a></li>
                            <li><a href="#">和服的種類與用途</a></li>
                            <li><a href="#">和服配飾詳解</a></li>
                            <li><a href="#">和服的季節性穿著指南</a></li>
                            <li><a href="#">和服在現代日本社會中的新潮流</a></li>
                            <li><a href="#">穿和服時需要注意的禮儀細節</a></li>
                        </ul>
                    </nav>
                    <p>
                        <a href="#"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
                    </p>
                </aside>
            </div>
            @*<footer>
        <p><small>© 3021 FARM CAPYZOU</small></p>
            </footer>*@
        </body>
        </html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 中的視圖文件，用 Razor 語法編寫。它渲染一個兩欄式的網頁，包含和服主題的內容。以下是對代碼的詳細解釋：

1. `@{ Layout = "~/Views/Shared/_Layout.cshtml"; }`

這行代碼指定了該視圖使用的布局文件 _Layout.cshtml，位於共享的 Views/Shared 目錄中。這個布局文件通常包含頁面的整體結構，比如頭部、腳部等公共部分。

2. `@{ ViewBag.Title = "Contact5"; }`

這行代碼設置頁面的標題 ViewBag.Title 為 "Contact5"。標題通常會被布局文件中的 <title> 標簽使用，顯示在瀏覽器的標簽頁上。

3. `<div class="farm-wrapper">`

包裹整個內容的 div，提供了一個高層次的容器。farm-wrapper 是一個類，可以用於 CSS 樣式。

4. `<head>` 內的部分

包含了頁面的 <meta> 標簽，用於設置字符編碼為 UTF-8，以及引入外部 CSS 樣式文件。
- css/style.css 是主樣式表。
- @Url.Content("~/Content/css/reset.css") 使用 Razor 的 Url.Content 方法將相對路徑轉換為應用程序的絕對路徑，用來引入重置樣式表。
- 使用 @section styles 來引入額外的樣式表 farm-style.css，這種方式允許子視圖重寫樣式部分。

5. 內聯樣式 (`<style>`)

定義了一些頁面的樣式：
- img { border-radius: 50%; }：所有圖片將具有圓角效果。
- body { background-color: pink; }：頁面背景顏色設為粉紅色。
- dl 和 dd：為定義列表的縮進設置樣式。

6. `<header>` 和導航欄

頁面頭部包含了一個 <h1> 標簽，顯示一個標題圖片 carrots.png。
導航欄包含了 5 個鏈接：HOME, ABOUT, BLOG, VIDEO 和 CONTACT，構成了網站的主要導航結構。

7. `<main>` 和文章部分

<main> 包含主要內容區域，采用文章格式展示和服的四大注意事項。
- 每個部分有標題（<h3> 標簽）和對應的描述（<p> 標簽）。
- 文章使用了 <figure> 和 <figcaption> 來展示圖片及其說明，增強了頁面的視覺展示。

8. `<aside>` 和側邊欄

<aside> 部分用來放置側邊欄內容：
- Category 和 Recent Articles 兩個導航部分，展示了和服相關的分類和最近的文章。
- 側邊欄還包含了一張圖片，用來展示額外的信息或個人照片。

9. 腳注部分

使用注釋 (@* *@) 將頁面底部的 <footer> 部分暫時隱藏。里面包含版權信息，表示頁面的所有權。

10. 總結

這個頁面展示了一個兩欄式布局，左邊是主要內容，右邊是側邊欄。內容圍繞著和服文化展開，包含了詳細的注意事項和相關文章。該視圖引入了多個外部和內聯的 CSS 樣式，確保頁面的視覺效果。

大家明天見~

自然風網站/復古風網站

日式網站首頁跟實用日語

系列文

asp.net可以變出那些功能共 30 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22088 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

asp.net可以變出那些功能系列 第 11 篇